<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形菜单</title>
</head>

<body>
    <div>

    </div>
    <script>
        var menuList = [{
            id: 1,
            title: '班级学员管理',
            sonList: [{
                id: 11,
                title: '班级管理',
                sonList: [{
                    id: 111,
                    title: '学员信息管理',
                    sonList: [{
                        id: 1111,
                        title: '个人考勤',
                    }, {
                        id: 1112,
                        title: '代码量考勤',
                    }]
                }, {
                    id: 112,
                    title: '学员课表管理',
                    sonList: null
                }]
            }, {
                id: 12,
                title: '班级学员就业管理',
                sonList: null
            }]
        }, {
            id: 2,
            title: '教学业务管理',
            sonList: [{
                id: 21,
                title: '每日反馈'
            }, {
                id: 22,
                title: '每日测评'
            }]

        }, {
            id: 3,
            title: '就业业务管理',
            sonList: [{
                id: 31,
                title: '讨厌',
                sonList: [{
                    id: 311,
                    title: '每日反馈1'
                }, {
                    id: 312,
                    title: '每日测评2'
                }]
            }, {
                id: 32,
                title: '死鬼'
            }]
        }, ];

        function meulist(list, arrHtml) {
            arrHtml.push('<ul>');
            for (let i = 0; i < list.length; i++) {
                if (list[i].sonList) {
                    arrHtml.push(`<li> ${list[i].title}`);
                    meulist(list[i].sonList, arr)
                    arrHtml.push("</li>")
                } else {
                    arrHtml.push(`<li>${list[i].title}</li>`)

                }
            }
            arrHtml.push('</ul>');
            return arrHtml;
        }
        var arr = []
        arr = meulist(menuList, arr)
        var strHtmlAll = arr.join('\n')
        document.querySelector('div').innerHTML = strHtmlAll;
    </script>
</body>

</html>